<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据统计分析平台</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <!-- 引入K线图所需库 -->
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.1"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-financial@0.1.1"></script>

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            neutral: '#F5F7FA',
            dark: '#1D2129',
            'light-gray': '#C9CDD4',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .transition-all-300 {
        transition: all 0.3s ease;
      }
    }
  </style>
</head>

<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white border-b border-gray-200 shadow-sm sticky top-0 z-30">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <i class="fa fa-bar-chart text-primary text-2xl"></i>
        <h1 class="text-xl font-semibold text-dark">数据统计分析平台</h1>
      </div>
      <div class="flex items-center space-x-4">
        <button class="text-gray-500 hover:text-primary transition-all-300">
          <i class="fa fa-question-circle"></i>
        </button>
        <button class="text-gray-500 hover:text-primary transition-all-300">
          <i class="fa fa-cog"></i>
        </button>
        <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
          <i class="fa fa-user"></i>
        </div>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-grow container mx-auto px-4 py-6">
    <!-- 控制区域 -->
    <div class="bg-white rounded-lg card-shadow p-4 mb-6">
      <div class="flex flex-wrap gap-4 items-center">
        <!-- 海区选择 -->
        <div class="flex items-center space-x-2">
          <label for="sea-area" class="text-sm font-medium text-gray-700">海区:</label>
          <select id="sea-area" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            <option value="china-coast">中国近海</option>
            <option value="pacific">太平洋</option>
            <option value="indian">印度洋</option>
            <option value="atlantic">大西洋</option>
          </select>
        </div>
        
        <!-- 统计指标选择 -->
        <div class="flex items-center space-x-2">
          <label for="stat-indicator" class="text-sm font-medium text-gray-700">统计指标:</label>
          <select id="stat-indicator" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            <option value="bias">偏差(Bias)</option>
            <option value="rmse">均方根误差(RMSE)</option>
            <option value="mae">平均绝对误差(MAE)</option>
            <option value="rre">相对误差(RRE)</option>
            <option value="corr">相关系数(R)</option>
            <option value="sd">标准差(SD)</option>
          </select>
        </div>
        
        <!-- 图表类型选择 -->
        <div class="flex items-center space-x-2">
          <label for="chart-type" class="text-sm font-medium text-gray-700">图表类型:</label>
          <select id="chart-type" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            <option value="line">折线图</option>
            <option value="candlestick">K线图</option>
            <option value="scatter">散点图</option>
          </select>
        </div>
        
        <!-- 时间范围选择 -->
        <div class="flex items-center space-x-2">
          <label for="time-range" class="text-sm font-medium text-gray-700">时间范围:</label>
          <select id="time-range" class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            <option value="1w">近7天</option>
            <option value="1m">近30天</option>
            <option value="3m">近90天</option>
            <option value="6m">近半年</option>
            <option value="1y">近一年</option>
          </select>
        </div>
        
        <!-- 统计按钮 -->
        <div class="ml-auto">
          <button id="stat-button" class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-md font-medium transition-all-300 flex items-center space-x-2">
            <i class="fa fa-refresh"></i>
            <span>统计</span>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 视图切换 -->
    <div class="flex items-center justify-between mb-4">
      <div class="flex items-center space-x-2">
        <button id="table-view-btn" class="px-4 py-2 bg-white border border-gray-300 rounded-l-md text-primary font-medium transition-all-300">
          <i class="fa fa-table mr-1"></i>数据表
        </button>
        <button id="chart-view-btn" class="px-4 py-2 bg-primary text-white border border-primary rounded-r-md font-medium transition-all-300">
          <i class="fa fa-line-chart mr-1"></i>统计图
        </button>
      </div>
      <div class="text-sm text-gray-500">
        最后更新: 2025-11-18 15:00
      </div>
    </div>
    
    <!-- 内容展示区 -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
      <!-- 图表区域 -->
      <div id="chart-container" class="lg:col-span-12 bg-white rounded-lg card-shadow p-4">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-lg font-semibold">偏差(Bias)变化趋势</h2>
          <div class="flex space-x-2">
            <button class="text-gray-500 hover:text-primary transition-all-300" title="下载图表">
              <i class="fa fa-download"></i>
            </button>
            <button class="text-gray-500 hover:text-primary transition-all-300" title="全屏查看">
              <i class="fa fa-expand"></i>
            </button>
          </div>
        </div>
        <div class="h-[400px] w-full">
          <canvas id="main-chart"></canvas>
        </div>
      </div>
      
      <!-- 数据表格区域 -->
      <div id="table-container" class="lg:col-span-12 bg-white rounded-lg card-shadow p-4 hidden">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-lg font-semibold">统计数据详情</h2>
          <div class="flex space-x-2">
            <button class="text-gray-500 hover:text-primary transition-all-300" title="导出数据">
              <i class="fa fa-download"></i>
            </button>
            <div class="relative">
              <input type="text" placeholder="搜索数据..." class="pl-8 pr-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-primary">
              <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
            </div>
          </div>
        </div>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead>
              <tr>
                <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">偏差(Bias)</th>
                <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">均方根误差(RMSE)</th>
                <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">平均绝对误差(MAE)</th>
                <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">相对误差(RRE)</th>
                <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">相关系数(R)</th>
                <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">标准差(SD)</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              <tr class="hover:bg-gray-50 transition-all-300">
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">24h</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">-0.24</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.36</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.29</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.18</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.87</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.31</td>
              </tr>
              <tr class="hover:bg-gray-50 transition-all-300">
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">48h</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">-0.26</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.39</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.32</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.21</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.85</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.34</td>
              </tr>
              <tr class="hover:bg-gray-50 transition-all-300">
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">72h</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">-0.28</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.42</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.35</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.24</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.82</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.37</td>
              </tr>
              <tr class="hover:bg-gray-50 transition-all-300">
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">96h</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">-0.30</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.45</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.38</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.27</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.79</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.40</td>
              </tr>
              <tr class="hover:bg-gray-50 transition-all-300">
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">120h</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">-0.33</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.48</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.41</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.30</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.76</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.43</td>
              </tr>
              <tr class="hover:bg-gray-50 transition-all-300">
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">144h</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">-0.36</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.51</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.44</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.33</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.73</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.46</td>
              </tr>
              <tr class="hover:bg-gray-50 transition-all-300">
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900">168h</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">-0.39</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.54</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.47</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.36</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.70</td>
                <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">0.49</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="flex justify-between items-center mt-4 text-sm text-gray-500">
          <div>显示 1 至 7 条，共 7 条</div>
          <div class="flex space-x-1">
            <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 text-gray-400 cursor-not-allowed">
              <i class="fa fa-chevron-left"></i>
            </button>
            <button class="w-8 h-8 flex items-center justify-center rounded border border-primary bg-primary text-white">1</button>
            <button class="w-8 h-8 flex items-center justify-center rounded border border-gray-300 hover:border-primary hover:text-primary transition-all-300">
              <i class="fa fa-chevron-right"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-gray-200 py-4 mt-8">
    <div class="container mx-auto px-4 text-center text-sm text-gray-500">
      <p>© 2025 数据统计分析平台 版权所有</p>
    </div>
  </footer>

  <!-- JavaScript 逻辑 -->
  <script>
    // 初始化图表
    let mainChart;
    const ctx = document.getElementById('main-chart').getContext('2d');
    
    // 图表数据
    const chartData = {
      timeLabels: ['24h', '48h', '72h', '96h', '120h', '144h', '168h'],
      datasets: {
        bias: [-0.24, -0.26, -0.28, -0.30, -0.33, -0.36, -0.39],
        rmse: [0.36, 0.39, 0.42, 0.45, 0.48, 0.51, 0.54],
        mae: [0.29, 0.32, 0.35, 0.38, 0.41, 0.44, 0.47],
        rre: [0.18, 0.21, 0.24, 0.27, 0.30, 0.33, 0.36],
        corr: [0.87, 0.85, 0.82, 0.79, 0.76, 0.73, 0.70],
        sd: [0.31, 0.34, 0.37, 0.40, 0.43, 0.46, 0.49]
      },
      // K线图数据
      candlestickData: [
        { t: '24h', o: -0.25, h: -0.22, l: -0.27, c: -0.24 },
        { t: '48h', o: -0.25, h: -0.23, l: -0.28, c: -0.26 },
        { t: '72h', o: -0.27, h: -0.25, l: -0.30, c: -0.28 },
        { t: '96h', o: -0.29, h: -0.27, l: -0.32, c: -0.30 },
        { t: '120h', o: -0.31, h: -0.29, l: -0.35, c: -0.33 },
        { t: '144h', o: -0.34, h: -0.32, l: -0.38, c: -0.36 },
        { t: '168h', o: -0.37, h: -0.35, l: -0.41, c: -0.39 }
      ],
      // 散点图额外数据
      scatterData: [
        { x: '24h', y: -0.24, v: 3.2 },
        { x: '48h', y: -0.26, v: 3.5 },
        { x: '72h', y: -0.28, v: 3.8 },
        { x: '96h', y: -0.30, v: 4.1 },
        { x: '120h', y: -0.33, v: 4.4 },
        { x: '144h', y: -0.36, v: 4.7 },
        { x: '168h', y: -0.39, v: 5.0 }
      ]
    };
    
    // 指标名称映射
    const indicatorNames = {
      bias: '偏差(Bias)',
      rmse: '均方根误差(RMSE)',
      mae: '平均绝对误差(MAE)',
      rre: '相对误差(RRE)',
      corr: '相关系数(R)',
      sd: '标准差(SD)'
    };
    
    // 初始化折线图
    function initLineChart(indicator = 'bias') {
      if (mainChart) {
        mainChart.destroy();
      }
      
      mainChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: chartData.timeLabels,
          datasets: [{
            label: indicatorNames[indicator],
            data: chartData.datasets[indicator],
            borderColor: '#165DFF',
            backgroundColor: 'rgba(22, 93, 255, 0.1)',
            borderWidth: 2,
            pointBackgroundColor: '#165DFF',
            pointRadius: 4,
            pointHoverRadius: 6,
            tension: 0.3,
            fill: false
          }]
        },
        options: getChartOptions(indicator)
      });
    }
    
    // 初始化K线图
    function initCandlestickChart() {
      if (mainChart) {
        mainChart.destroy();
      }
      
      mainChart = new Chart(ctx, {
        type: 'candlestick',
        data: {
          datasets: [{
            label: '偏差(Bias) K线图',
            data: chartData.candlestickData,
            color: {
              up: '#36CFC9',
              down: '#F53F3F',
              unchanged: '#86909C'
            },
            borderColor: {
              up: '#36CFC9',
              down: '#F53F3F',
              unchanged: '#86909C'
            }
          }]
        },
        options: getChartOptions('bias')
      });
    }
    
    // 初始化散点图
    function initScatterChart(indicator = 'bias') {
      if (mainChart) {
        mainChart.destroy();
      }
      
      mainChart = new Chart(ctx, {
        type: 'scatter',
        data: {
          datasets: [{
            label: indicatorNames[indicator],
            data: chartData.scatterData,
            backgroundColor: function(context) {
              const value = context.dataset.data[context.dataIndex].v;
              return value > 4 ? 'rgba(245, 63, 63, 0.7)' : 
                     value > 3.5 ? 'rgba(255, 153, 0, 0.7)' : 
                     'rgba(54, 207, 201, 0.7)';
            },
            borderColor: '#fff',
            borderWidth: 1,
            pointRadius: 8,
            pointHoverRadius: 10
          }]
        },
        options: getChartOptions(indicator)
      });
    }
    
    // 获取图表通用配置
    function getChartOptions(indicator) {
      return {
        responsive: true,
        maintainAspectRatio: false,
        interaction: {
          mode: 'index',
          intersect: false,
        },
        plugins: {
          legend: {
            display: true,
            position: 'top',
          },
          tooltip: {
            backgroundColor: 'rgba(29, 33, 41, 0.8)',
            padding: 10,
            cornerRadius: 4,
            titleFont: {
              size: 13
            },
            bodyFont: {
              size: 12
            }
          },
          title: {
            display: false
          }
        },
        scales: {
          x: {
            title: {
              display: true,
              text: '时间',
              font: {
                weight: 'bold'
              }
            },
            grid: {
              display: false
            }
          },
          y: {
            title: {
              display: true,
              text: indicatorNames[indicator],
              font: {
                weight: 'bold'
              }
            },
            grid: {
              borderDash: [2, 4],
              color: 'rgba(0, 0, 0, 0.05)'
            },
            ticks: {
              callback: function(value) {
                return value.toFixed(2);
              }
            }
          }
        },
        animation: {
          duration: 800,
          easing: 'easeOutQuart'
        }
      };
    }
    
    // 视图切换
    document.getElementById('table-view-btn').addEventListener('click', function() {
      document.getElementById('table-container').classList.remove('hidden');
      document.getElementById('chart-container').classList.add('hidden');
      
      // 更新按钮样式
      this.classList.remove('bg-white', 'border-gray-300', 'text-gray-700');
      this.classList.add('bg-primary', 'border-primary', 'text-white');
      
      const chartBtn = document.getElementById('chart-view-btn');
      chartBtn.classList.remove('bg-primary', 'border-primary', 'text-white');
      chartBtn.classList.add('bg-white', 'border-gray-300', 'text-gray-700');
    });
    
    document.getElementById('chart-view-btn').addEventListener('click', function() {
      document.getElementById('chart-container').classList.remove('hidden');
      document.getElementById('table-container').classList.add('hidden');
      
      // 更新按钮样式
      this.classList.remove('bg-white', 'border-gray-300', 'text-gray-700');
      this.classList.add('bg-primary', 'border-primary', 'text-white');
      
      const tableBtn = document.getElementById('table-view-btn');
      tableBtn.classList.remove('bg-primary', 'border-primary', 'text-white');
      tableBtn.classList.add('bg-white', 'border-gray-300', 'text-gray-700');
    });
    
    // 统计按钮点击事件
    document.getElementById('stat-button').addEventListener('click', function() {
      // 添加加载动画
      this.innerHTML = '<i class="fa fa-spinner fa-spin"></i><span>统计中...</span>';
      
      // 模拟数据加载延迟
      setTimeout(() => {
        const chartType = document.getElementById('chart-type').value;
        const indicator = document.getElementById('stat-indicator').value;
        
        // 更新图表标题
        document.querySelector('#chart-container h2').textContent = 
          `${indicatorNames[indicator]}变化趋势`;
        
        // 根据选择的图表类型初始化不同的图表
        if (chartType === 'line') {
          initLineChart(indicator);
        } else if (chartType === 'candlestick') {
          initCandlestickChart();
        } else if (chartType === 'scatter') {
          initScatterChart(indicator);
        }
        
        // 恢复按钮状态
        this.innerHTML = '<i class="fa fa-refresh"></i><span>统计</span>';
        
        // 显示图表区域
        document.getElementById('chart-container').classList.remove('hidden');
        document.getElementById('table-container').classList.add('hidden');
        
        // 更新按钮样式
        document.getElementById('chart-view-btn').classList.remove('bg-white', 'border-gray-300', 'text-gray-700');
        document.getElementById('chart-view-btn').classList.add('bg-primary', 'border-primary', 'text-white');
        
        document.getElementById('table-view-btn').classList.remove('bg-primary', 'border-primary', 'text-white');
        document.getElementById('table-view-btn').classList.add('bg-white', 'border-gray-300', 'text-gray-700');
        
      }, 800);
    });
    
    // 初始化页面
    window.addEventListener('load', function() {
      initLineChart();
      
      // 添加图表类型选择事件
      document.getElementById('chart-type').addEventListener('change', function() {
        const indicator = document.getElementById('stat-indicator').value;
        if (this.value === 'line') {
          initLineChart(indicator);
        } else if (this.value === 'candlestick') {
          initCandlestickChart();
        } else if (this.value === 'scatter') {
          initScatterChart(indicator);
        }
      });
      
      // 添加统计指标选择事件
      document.getElementById('stat-indicator').addEventListener('change', function() {
        const chartType = document.getElementById('chart-type').value;
        if (chartType === 'line' || chartType === 'scatter') {
          const indicator = this.value;
          document.querySelector('#chart-container h2').textContent = 
            `${indicatorNames[indicator]}变化趋势`;
            
          if (chartType === 'line') {
            initLineChart(indicator);
          } else {
            initScatterChart(indicator);
          }
        }
      });
    });
  </script>
</body>
</html>
